/* common.wxss */

/* @import "../../../utils/common.css"; */

/* 导航组 */

.diy-navBar .data-list::after {
  clear: both;
  content: " ";
  display: table;
}

.diy-navBar .item-nav {
  float: left;
  margin: 10px 0;
  text-align: center;
}

.diy-navBar .item-nav .item-image {
  width: 74rpx;
  height: 74rpx;
  font-size: 0;
  margin: 0 auto 8rpx;
	position: relative;
}

.diy-navBar .item-nav .item-image .image {
  height: 100%;
  width: 100%;
  border-radius: 20rpx;
  margin: 0 auto;
}
// 状态图片
.item-status{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(100%,-50%);
	animation: 3s rainbow ease infinite normal;
	image{
		display: block;
		width: 100%;
		height: 100%;
	}
}
.item-nav:nth-child(2) .item-status{
	width: 56rpx;
	height: 16rpx;
}
.item-nav:nth-child(3) .item-status{
	width: 56rpx;
	height: 20rpx;
}
.item-nav:nth-child(4) .item-status{
	width: 24rpx;
	height: 26rpx;
}
@keyframes rainbow {
	0% {
		transform:rotate(0deg) translate(100%,-50%);
	}
	1% {
		transform:rotate(5deg) translate(100%,-50%);
	}
	2%{
		transform:rotate(5deg) translate(100%,-50%);
	}
	3%{
		transform:rotate(5deg) translate(100%,-50%);
	}
	4%{
		transform:rotate(0deg) translate(100%,-50%);
	}
	5% {
		transform:rotate(-5deg) translate(100%,-50%);
	}
	6%{
		transform:rotate(-5deg) translate(100%,-50%);
	}
	7%{
		transform:rotate(-5deg) translate(100%,-50%);
	}
	8%{
		transform:rotate(0deg) translate(100%,-50%);
	}
}
/* 分列布局 */

.diy-navBar .avg-sm-3 > .item-nav {
  width: 33.33333333%;
}

.diy-navBar .avg-sm-4 > .item-nav {
  width: 25%;
}

.diy-navBar .avg-sm-5 > .item-nav {
  width: 20%;
}